<template>
    <div class="middle">
        <Banner v-show="endData.columnChart" :imgUrl="endData.columnChartUrl"></Banner>
        <Notification :endData="endData"></Notification>
        <div class="main">
            <div class="left">
                <Announcement></Announcement>
                <el-row :gutter="30">
                    <el-col :span="12" v-for="item, index in newsTagList" :key="index">
                        <News :tagList="item"></News>
                    </el-col>
                </el-row>
                <Slideshow v-show="swiperSlide.length" :swiperSlide="swiperSlide" :height="'100px'"></Slideshow>
                <policeCampCulture :height="'170px'"></policeCampCulture>
            </div>
            <div class="right">
                <Toolbar></Toolbar>
            </div>
        </div>
    </div>
</template>

<script>
import Banner from "@/components-website/banner.vue" //背景图
import Notification from "@/components-website/notification.vue" //重大政策转载
import Announcement from "@/components-website/announcement.vue" //公安要闻 公告
import News from "@/components-website/news.vue" //公告栏
import Slideshow from "@/components-website/slideshow.vue" //轮播
import PoliceCampCulture from "@/components-website/policeCampCulture.vue" //警营文化
import Toolbar from "@/components-website/toolbar.vue"
import homepageApi from "@/api/homepage"
import $baseUrl from '@/utils/baseURL';
import getPageTitle from '@/utils/get-page-title'

export default {
    name: 'App',
    components: {
        Banner,
        Notification,
        Announcement,
        News,
        Slideshow,
        PoliceCampCulture,
        Toolbar
    },
    data() {
        return {
            newsTagList: [],
            swiperSlide: [],
            chartList: [],
            endData: {},
            filesOneUrl: '',
            filesTwoUrl: ''
        }
    },
    mounted() {
        this.queryNavigation();
        this.queryParentList();
        this.queryEndPage()
    },
    methods: {
        toSys() {
            this.$router.push({ path: '/login' })
        },

        async queryEndPage() {
            let { data } = await homepageApi.queryEndPage();
            this.endData = data || {}
            this.endData = {
                ...data,
                headerImageUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.headerImage}`,
                columnChartUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.columnChart}`,
                backgroundImageUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.backgroundImage}`
            }
            sessionStorage.setItem('headerName', data.headerName);
            document.title = getPageTitle('', data.headerName)
        },
        async queryNavigation() {
            let { data } = await homepageApi.queryNavigation()
            let tagList = data || [];
            tagList.sort(function (a, b) { return a.level - b.level; });
            tagList = this.groupById(tagList, 'level')
            tagList = tagList.filter((item, index) => {
                return index > 0
            })
            if (tagList.length > 0) this.newsTagList = tagList;
        },
        groupById(arr, key) {
            if (!key) { return }
            return arr.reduce((acc, obj) => {
                // 查找是否已有该id的分组  
                let found = acc.find(group => group.some(item => item[key] === obj[key]));
                if (found) {
                    // 如果找到了，就将当前对象添加到该分组中  
                    found.push(obj);
                } else {
                    // 如果没有找到，就新建一个分组  
                    acc.push([obj]);
                }
                return acc;
            }, []);
        },
        groupIntoPairs(arr) {
            let result = [];
            let temp = [];
            for (let i = 0; i < arr.length; i++) {
                temp.push(arr[i]);
                // 当temp中有两个元素或者到达数组末尾时，将temp添加到结果数组中  
                if (temp.length === 2 || i === arr.length - 1) {
                    result.push(temp);
                    temp = []; // 重置temp数组  
                }
            }
            return result;
        },
        async queryParentList() {
            let { data } = await homepageApi.queryParentList()
            this.swiperSlide = data || [];
            this.swiperSlide = this.swiperSlide.filter(item => {
                item.imgUrl = `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${item.coverId}`;
                item.type = "URL";
                return item.coverId && item.url
            })
            console.log(this.swiperSlide)
        },
    },

}
</script>

<style lang="scss" scoped>
.middle {
    width: 1200px;
    margin: 0 auto;
    // padding: 15px 30px;
    box-sizing: border-box;

    .main {
        display: flex;
        justify-content: space-between;
    }

    .left {
        width: 900px;
        overflow: hidden;
    }

    .right {
        width: calc(100% - 920px);
        box-sizing: border-box;
    }
}

.toSys {
    width: 1200px;
    margin: 0 auto;
    line-height: 30px;
    text-align: right;
    color: rgb(2, 54, 96);
    cursor: pointer;
}
</style>